@charset "UTF-8";
// @import "var";

/* --------------------------------------------
宽高
---------------------------------------------*/
@mixin size($width: 100%, $height: 100%) {
    width               : $width;
    height              : $height;
}
/* --------------------------------------------
flex布局
---------------------------------------------*/
@mixin flex($row: row, $justify-content: flex-start, $align-items: flex-start, $wrap: nowrap) {
    display             : flex;
    flex-flow           : $row $wrap;
    justify-content     : $justify-content;
    align-items         : $align-items;
}
/* --------------------------------------------
字体
---------------------------------------------*/
@mixin font($font-size: $font-size-g, $font-weight: normal, $font-family: inherit) {
    font-size           : $font-size;
    font-weight         : $font-weight;
    font-family         : $font-family;
}
/* --------------------------------------------
背景图片
---------------------------------------------*/
@mixin bg-img($url) {
    background-image    : url($url);
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : 100% 100%;
}
/* --------------------------------------------
省略号
---------------------------------------------*/
@mixin ellipsis() {
    overflow            : hidden;
    -ms-text-overflow   : ellipsis;
    text-overflow       : ellipsis;
    white-space         : nowrap;
}
/* --------------------------------------------
自定义行数省略号
---------------------------------------------*/
@mixin multiellipsis($line) {
    overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: $line; //行数
          -webkit-box-orient: vertical;
}
/* --------------------------------------------
绝对定位
---------------------------------------------*/
@mixin absolute($top: unset, $right: unset, $bottom: unset, $left: unset) {
    position            : absolute;
    top                 : $top;
    left                : $left;
    bottom              : $bottom;
    right               : $right;
}
/* --------------------------------------------
阴影
---------------------------------------------*/
@mixin text-shadow($color: $font-color-white-g, $shadow-color: $font-color-white-g) {
    color               : $color;
    text-shadow         : rgba($shadow-color, 1) 0 0 0.02rem,
                        rgba($shadow-color, 1) 0 0 0.04rem,
                        rgba($shadow-color, 1) 0 0 0.06rem,
                        rgba($color, 1) 0 0 0.2rem;
}
/* --------------------------------------------
默认图片(设置image标签默认图片)
---------------------------------------------*/
@mixin img-default($url) {
    position            : relative;

    &::after {
        @include        size;
        @include        bg-img($url);
        @include        absolute($top: 0, $left: 0);
        content         : "";
    }
}
/* --------------------------------------------
低于12px字体(支持chrome 需要自行调整宽高、布局)
---------------------------------------------*/
@mixin font-mini($font-size: 10px) {
    // display:inline-block;
    // vertical-align: middle;
    // font-size: 2 * $font-size;
    font-size           : 12px;
    -webkit-transform   : scale(round($font-size / 12px * 100) / 100);
    transform-origin    : left center;
}
/* --------------------------------------------
边框
---------------------------------------------*/
@mixin border($size: 1px, $style: solid, $color: $font-color-white-g, $radius: 0px) {
    border: $size $style $color;
    border-radius: $radius;
}
/* --------------------------------------------
线性渐变
---------------------------------------------*/
@mixin linear-gradient($start, $end, $degrees: 0deg) {
    background: -moz-linear-gradient($degrees, $start 0%, $end 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, $start), color-stop(100%, $end)); /* safari4+,chrome */
    background: -webkit-linear-gradient($degrees, $start 0%, $end 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient($degrees, $start 0%, $end 100%); /* opera 11.10+ */
    background: -ms-linear-gradient($degrees, $start 0%, $end 100%); /* ie10+ */
    background: linear-gradient($degrees, $start 0%, $end 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-one', endColorstr='$color-two',GradientType=1 ); /* ie6-9 */
}
/* --------------------------------------------
居中
---------------------------------------------*/
@mixin center($center: all) {
    position: absolute;
    @if $center == vertical {
        top: 50%;
        bottom: unset;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    @else if $center == horizontal {
        left: 50%;
        right: unset;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    @else {
        top: 50%;
        left: 50%;
        right: unset;
        bottom: unset;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
  }
  